<template>
  <Layout>
    <PageHeader :title="title"></PageHeader>
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <b-tabs justified nav-class="newul nav-tabs-custom" content-class="p-3 text-muted">
              <b-tab active>
                <template v-slot:title>
                  <span class="d-inline-block d-sm-none">
                    <i class="fas fa-home"></i>
                  </span>
                  <span class="d-none d-sm-inline-block">资讯信源</span>
                </template>
                <div class="sel">
                  <span class="sel-title">时间范围:</span>
                  <button
                    type="button"
                    class="btn btn-light rounded-pill btn-sm sel-item"
                    :class="{ isActive: timeFrameChange == index }"
                    v-for="(item,index) in timeFrame"
                    :key="index"
                    @click="timeFrameItem(index)"
                  >
                    {{ item }}
                  </button>
                </div>
                <div class="sel">
                  <span class="sel-title">执行状态:</span>
                  <button
                    type="button"
                    class="btn btn-light rounded-pill btn-sm sel-item"
                    :class="{ isActive: implementStateChange == index }"
                    v-for="(item,index) in implementState"
                    :key="index"
                    @click="implementStateItem(index)"
                  >
                    {{ item }}
                  </button>
                </div>
                <div class="sel">
                  <span class="sel-title">检索范围:</span>
                  <div style="display:inline-block;margin-left: 10px;">
                    <el-radio v-model="radio" label="1">不限</el-radio>
                    <el-radio v-model="radio" label="2">根据信源或者网站ID</el-radio>
                    <el-radio v-model="radio" label="3">种子栏目或媒体账号ID</el-radio>
                  </div>
                </div>
                <div>
                  <div class="mt-3 mb-3 row" style="align-items:center;">
                    <div class="col-md-6">
                      <input type="text" class="form-control rounded" placeholder="输入你要检索的ID编号代码" />
                    </div>
                    <div class="col-md-3">
                      <b-button variant="primary">
                        <i class="ri-search-line align-middle mr-1"></i>查询
                      </b-button>
                    </div>
                    <div class="col-md-3" style="text-align:right;">查看历史查询记录</div>
                  </div>
                </div>
                <div>
                  <div id="gen-question-accordion" class="custom-accordion-arrow">
                    <div class="card">
                      <a
                        v-b-toggle.gen-question-accordion-1
                        class="text-dark"
                        data-toggle="collapse"
                        aria-expanded="true"
                        aria-controls="gen-question-collapseOne"
                      >
                        <div class="card-header" id="gen-question-headingOne">
                          <h5 class="font-size-14 m-0">
                            <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                            数据采集
                          </h5>
                        </div>
                      </a>
                      <b-collapse
                        id="gen-question-accordion-1"
                        visible
                        accordion="my-accordion"
                        aria-labelledby="gen-question-headingOne"
                        data-parent="#gen-question-accordion"
                      >
                        <div class="card-body">
                          <div>
                            <span>采集量： 12万</span>
                            <span>正常采集： 11.8万</span>
                            <span>处理采集： 0.2万</span>
                          </div>
                          <div>
                            <span>超时采集： 1万条</span>
                            <span>平均每分钟处理： 220条</span>
                            <span>平均每秒钟处理： 4条</span>
                          </div>
                          <div>
                            <span>最大错误率： 短视频信源</span>
                          </div>
                        </div>
                      </b-collapse>
                    </div>
                    <div class="card">
                      <a
                        v-b-toggle.gen-question-accordion-2
                        data-toggle="collapse"
                        aria-expanded="false"
                        aria-controls="gen-question-collapseTwo"
                      >
                        <div class="card-header" id="gen-question-headingTwo">
                          <h5 class="font-size-14 m-0">
                            <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                            数据去重
                          </h5>
                        </div>
                      </a>
                      <b-collapse
                        id="gen-question-accordion-2"
                        accordion="my-accordion"
                        aria-labelledby="gen-question-headingTwo"
                        data-parent="#gen-question-accordion"
                      >
                        <div class="card-body">
                          数据去重
                        </div>
                      </b-collapse>
                    </div>
                    <div class="card">
                      <a
                        v-b-toggle.gen-question-accordion-3
                        data-toggle="collapse"
                        aria-expanded="false"
                        aria-controls="gen-question-collapseThree"
                      >
                        <div class="card-header" id="gen-question-headingThree">
                          <h5 class="font-size-14 m-0">
                            <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                            数据解析
                          </h5>
                        </div>
                      </a>
                      <b-collapse
                        id="gen-question-accordion-3"
                        accordion="my-accordion"
                        aria-labelledby="gen-question-headingThree"
                        data-parent="#gen-question-accordion"
                      >
                        <div class="card-body">
                          数据解析
                        </div>
                      </b-collapse>
                    </div>
                    <div class="card">
                      <a
                        v-b-toggle.gen-question-accordion-4
                        data-toggle="collapse"
                        aria-expanded="false"
                        aria-controls="gen-question-collapseFour"
                      >
                        <div class="card-header" id="gen-question-headingFour">
                          <h5 class="font-size-14 m-0">
                            <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                            数据传输（MQ）
                          </h5>
                        </div>
                      </a>
                      <b-collapse
                        id="gen-question-accordion-4"
                        accordion="my-accordion"
                        aria-labelledby="gen-question-headingFour"
                        data-parent="#gen-question-accordion"
                      >
                        <div class="card-body">
                          数据传输（MQ）
                        </div>
                      </b-collapse>
                    </div>
                    <div class="card">
                      <a
                        v-b-toggle.gen-question-accordion-5
                        class="collapsed"
                        data-toggle="collapse"
                        aria-expanded="false"
                        aria-controls="gen-question-collapseFive"
                      >
                        <div class="card-header" id="gen-question-headingFive">
                          <h5 class="font-size-14 m-0">
                            <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                            数据暂存
                          </h5>
                        </div>
                      </a>
                      <b-collapse
                        id="gen-question-accordion-5"
                        accordion="my-accordion"
                        aria-labelledby="gen-question-headingFive"
                        data-parent="#gen-question-accordion"
                      >
                        <div class="card-body">
                          数据暂存
                        </div>
                      </b-collapse>
                    </div>
                    <div class="card">
                      <a
                        v-b-toggle.gen-question-accordion-6
                        class="collapsed"
                        data-toggle="collapse"
                        aria-expanded="false"
                        aria-controls="gen-question-collapseFive"
                      >
                        <div class="card-header" id="gen-question-headingFive">
                          <h5 class="font-size-14 m-0">
                            <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                            数据处理  （nlp、去重）
                          </h5>
                        </div>
                      </a>
                      <b-collapse
                        id="gen-question-accordion-6"
                        accordion="my-accordion"
                        aria-labelledby="gen-question-headingFive"
                        data-parent="#gen-question-accordion"
                      >
                        <div class="card-body">
                          数据处理  （nlp、去重）
                        </div>
                      </b-collapse>
                    </div>
                    <div class="card">
                      <a
                        v-b-toggle.gen-question-accordion-7
                        class="collapsed"
                        data-toggle="collapse"
                        aria-expanded="false"
                        aria-controls="gen-question-collapseFive"
                      >
                        <div class="card-header" id="gen-question-headingFive">
                          <h5 class="font-size-14 m-0">
                            <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                            数据标记
                          </h5>
                        </div>
                      </a>
                      <b-collapse
                        id="gen-question-accordion-7"
                        accordion="my-accordion"
                        aria-labelledby="gen-question-headingFive"
                        data-parent="#gen-question-accordion"
                      >
                        <div class="card-body">
                          数据标记
                        </div>
                      </b-collapse>
                    </div>
                    <div class="card">
                      <a
                        v-b-toggle.gen-question-accordion-8
                        class="collapsed"
                        data-toggle="collapse"
                        aria-expanded="false"
                        aria-controls="gen-question-collapseFive"
                      >
                        <div class="card-header" id="gen-question-headingFive">
                          <h5 class="font-size-14 m-0">
                            <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                            数据存储
                          </h5>
                        </div>
                      </a>
                      <b-collapse
                        id="gen-question-accordion-8"
                        accordion="my-accordion"
                        aria-labelledby="gen-question-headingFive"
                        data-parent="#gen-question-accordion"
                      >
                        <div class="card-body">
                          数据存储
                        </div>
                      </b-collapse>
                    </div>
                    <div class="card">
                      <a
                        v-b-toggle.gen-question-accordion-9
                        class="collapsed"
                        data-toggle="collapse"
                        aria-expanded="false"
                        aria-controls="gen-question-collapseFive"
                      >
                        <div class="card-header" id="gen-question-headingFive">
                          <h5 class="font-size-14 m-0">
                            <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                            数据编辑
                          </h5>
                        </div>
                      </a>
                      <b-collapse
                        id="gen-question-accordion-9"
                        accordion="my-accordion"
                        aria-labelledby="gen-question-headingFive"
                        data-parent="#gen-question-accordion"
                      >
                        <div class="card-body">
                          数据编辑
                        </div>
                      </b-collapse>
                    </div>
                    <div class="card">
                      <a
                        v-b-toggle.gen-question-accordion-10
                        class="collapsed"
                        data-toggle="collapse"
                        aria-expanded="false"
                        aria-controls="gen-question-collapseFive"
                      >
                        <div class="card-header" id="gen-question-headingFive">
                          <h5 class="font-size-14 m-0">
                            <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                            数据调用
                          </h5>
                        </div>
                      </a>
                      <b-collapse
                        id="gen-question-accordion-10"
                        accordion="my-accordion"
                        aria-labelledby="gen-question-headingFive"
                        data-parent="#gen-question-accordion"
                      >
                        <div class="card-body">
                          数据调用
                        </div>
                      </b-collapse>
                    </div>
                    <div class="card">
                      <a
                        v-b-toggle.gen-question-accordion-11
                        class="collapsed"
                        data-toggle="collapse"
                        aria-expanded="false"
                        aria-controls="gen-question-collapseFive"
                      >
                        <div class="card-header" id="gen-question-headingFive">
                          <h5 class="font-size-14 m-0">
                            <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                            数据展示
                          </h5>
                        </div>
                      </a>
                      <b-collapse
                        id="gen-question-accordion-11"
                        accordion="my-accordion"
                        aria-labelledby="gen-question-headingFive"
                        data-parent="#gen-question-accordion"
                      >
                        <div class="card-body">
                          数据展示
                        </div>
                      </b-collapse>
                    </div>
                  </div>
                </div>
              </b-tab>
            </b-tabs>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
export default {
  components: {
    Layout,
    PageHeader,
  },
  data () {
    return {
      title: "信源生命周期",
      timeFrame: ["1小时前", "4小时前", "8小时", "16小时", "24小时", "昨天", "3天内"],
      timeFrameChange: 0,
      implementState: ["全部", "正确", "错误", "超时"],
      implementStateChange: 0,
      radio: "1",
    }
  },
  methods: {
    timeFrameItem(i){
      this.timeFrameChange = i
    },
    implementStateItem(i){
      this.implementStateChange = i
    }
  }
}
</script>
<style lang="scss" scoped>
.card-body ::v-deep .newul{
  display: block;
  li{
    display: inline-block;
    margin: 0 1rem;
    a{
      padding: 0.5rem 0rem;
    }
  }
}
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.sel {
  margin-top: 20px;
  .sel-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .sel-item {
    font-size: 12px;
    margin-left: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
    border-color: #5664d2;
    background: #5664d2;
}
::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: #5664d2;
}
</style>
